<template>
    <view class="bg-content">

        <u-sticky>
            <div style="height: 84px; border-bottom: 1rpx solid #eeeeee; background-color: #FFFFFF;">
                <u-search placeholder="搜索店铺内商品" v-model="searchKeyword" @search="onSearch" @custom="onSearch"></u-search>
                <u-tabs :list="tbGoodsClassList" :gutter="20" active-color="red" :current="activeTabIndex" @change="onTabChange"></u-tabs>
            </div>
        </u-sticky>

        <div style="margin-bottom: 52px;">
            <!--推荐广告-->
            <storeAdTemplate v-if="tbStore" :storeAdTemplateId="tbStore.storeAdTemplateId"></storeAdTemplate>

            <!--秒杀商品-->
            <storeSeckillGoods v-if="tbStore" :storeId="tbStore.id"></storeSeckillGoods>

            <!--推荐商品-->
            <storeGoodsRecommendTemplate v-if="tbStore" :storeGoodsRecommendTemplateId="tbStore.storeGoodsRecommendTemplateId"></storeGoodsRecommendTemplate>

            <!--商品列表-->
            <goodsList ref="goodsListRef" :goodsListFilterParams="goodsListFilterParams"></goodsList>
        </div>

        <view class="navigation">
            <view class="left">
                <!--<view class="item">-->
                <!--<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>-->
                <!--<view class="text u-line-1">客服</view>-->
                <!--</view>-->
                <view class="item" @click="collectStore()">
                    <u-icon name="heart" :size="40" :color="$u.color['contentColor']" v-if="!isCollected"></u-icon>
                    <u-icon name="heart-fill" :size="40" :color="$u.color['error']" v-if="isCollected"></u-icon>
                    <view class="text u-line-1">收藏店铺</view>
                </view>
                <view class="item" @click="navigateTo(`/pages/common/store/store-info/index?storeId=${tbStore.id}`)">
                    <u-icon name="/static/icon/shop.png" :size="40" :color="$u.color['contentColor']"></u-icon>
                    <view class="text u-line-1">店铺信息</view>
                </view>
                <view class="item" @click="showCouponList()" v-if="validCouponCount">
                    <u-icon name="coupon" :size="40" :color="$u.color['error']"></u-icon>
                    <view class="text u-line-1">领取优惠券</view>
                </view>
            </view>
        </view>

        <tbStoreCouponSelect ref="tbStoreCouponSelectRef"></tbStoreCouponSelect>
    </view>
</template>

<script>
    import goodsList from '@/components/goods-list.vue'
    import storeAdTemplate from './store-ad-template/index.vue'
    import storeGoodsRecommendTemplate from './store-goods-recommend-template/index.vue'
    import tbStoreCouponSelect from '@/components/tb-store-coupon-select.vue'
    import {TbStoreService} from "../../../dev/services/tb-store.service";
    import {TbStoreCouponService} from "../../../dev/services/tb-store-coupon.service";
    import {TbGoodsClassService} from "../../../dev/services/tb-goods-class.service";
    import {TbCollectUserStoreService} from "../../../dev/services/tb-collect-user-store.service";
    import {CommonUtil} from "../../../dev/core/utils/common.util";
    import storeSeckillGoods from './store-seckill-goods/index.vue'

    export default {
        data() {
            return {
                searchKeyword: null,
                tbStore: null,
                tbGoodsClassList: [],
                activeTabIndex: 0,
                validCouponCount: 0, // 有效的优惠券数量
                isCollected: false, // 是否已经收藏
                goodsListFilterParams: {
                    timestamp: new Date().getTime(),
                    storeId: null,
                    goodsClassId: null,
                    searchKeyword: null,
                }
            }
        },
        components: {
            storeSeckillGoods,
            goodsList,
            storeAdTemplate,
            storeGoodsRecommendTemplate,
            tbStoreCouponSelect,

        },
        onShow() {
            const _self = this;
            this.goodsListFilterParams.storeId = this.urlParams.storeId;
            new TbStoreService().findTbStoreById(this.urlParams.storeId).then(result => {
                _self.tbStore = result;
                uni.setNavigationBarTitle({
                    title: _self.tbStore.name
                });
            });

            console.log('------------------------', this.$u.color['contentColor'])
            console.log('------------------------', this.$u.color['error'])

            new TbStoreCouponService().validCouponCount({storeId: this.urlParams.storeId}).then(result => {
                _self.validCouponCount = result;
            });

            new TbGoodsClassService().findTbGoodsClassList({
                storeId: this.urlParams.storeId,
                status: '1'
            }).then(result => {
                _self.tbGoodsClassList = [
                    {name: '全部', id: null},
                    {name: '新品优先', id: null, orderBy: 'createtime desc'},
                    {name: '销量优先', id: null, orderBy: 'salesvolume desc'},
                    ...result
                ];
            });

            new TbCollectUserStoreService().isCollectedStore({
                communityId: _self.globalVariable.userInfo.tbCommunity.id,
                userId: _self.globalVariable.userInfo.id,
                storeId: this.urlParams.storeId,
            }).then(data => {
                _self.isCollected = data.id;
            });
        },
        methods: {
            onSearch(event) {
                this.goodsListFilterParams.searchKeyword = CommonUtil.trim(this.searchKeyword)
            },
            onTabChange(index) {
                this.activeTabIndex = index;
                this.goodsListFilterParams.goodsClassId = this.tbGoodsClassList[this.activeTabIndex].id;
                this.goodsListFilterParams.orderBy = this.tbGoodsClassList[this.activeTabIndex].orderBy;
                this.goodsListFilterParams.timestamp = new Date().getTime();
            },
            showCouponList() {
                this.$refs.tbStoreCouponSelectRef.openStoreCouponSelect(this.urlParams.storeId);
            },
            /**
             * 收藏店铺
             */
            collectStore() {
                const _self = this;
                if (!this.isCollected) {
                    // 收藏店铺
                    new TbCollectUserStoreService().saveTbCollectUserStore({
                        communityId: _self.globalVariable.userInfo.tbCommunity.id,
                        userId: _self.globalVariable.userInfo.id,
                        storeId: _self.tbStore.id
                    }).then(result => {
                        _self.isCollected = result.id;
                    });
                } else {
                    // 移除收藏店铺
                    new TbCollectUserStoreService().deleteTbCollectUserStore({
                        id: _self.isCollected
                    }).then(data => {
                        _self.isCollected = false;
                    });
                }
            },
        },
        // 上拉加载
        onReachBottom: function () {
            console.log(this.$refs.goodsListRef)
            if (this.$refs.goodsListRef.pagination.hasNextPage) {
                this.$refs.goodsListRef.doInfinite();
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>
